<template>
  <div>
    <div class="firstLoading" v-if="!bookContent">
      <van-loading
        size="30px"
        text-size="30px"
        text-color="#adadad"
      />Loding....
    </div>
    <div class="novel" v-if="bookContent" :style="{ background: bgColor }">
      <!-- 导航栏 -->
      <div class="top_nav" v-show="showBar">
        <div class="nav">
          <span class="iconfont icon-youjiantou1" @click="back"></span>
          <div class="icon">
            <div class="limitTime">
              <span class="iconfont icon-timer"></span> 剩8min
            </div>
            <span class="iconfont icon-pinglun1"></span>
            <span class="biaoqian iconfont icon-biaoqian_"></span>
          </div>
        </div>
      </div>
      <div
        class="novel_content"
        ref="wrap"
        @click="
          showBar = !showBar;
          showSet = false;
          showSlider = false;
        "
      >
        <div
          class="content"
          @touchstart="startDistance"
          @touchend="endDistance"
          ref="content"
          v-html="bookContent"
        ></div>
      </div>
      <!-- 底部栏 -->
      <div class="bottomBar" v-if="showBar">
        <div class="section">
          {{ catalogInfo.catalog[currentCataIndex].title }}
        </div>
        <div class="progress" pivot-text="10%">
          <span class="iconfont icon-youjiantou1"></span>
          <!-- 进度条 -->

          <van-slider
            active-color="#e65032"
            v-model="value"
            :max="100"
            :min="0"
            button-size="20px"
            @change="dragEnd"
          />

          <span class="iconfont icon-youjiantou"></span>
        </div>
        <div class="selectMode">
          <div
            class="icon"
            @click="
              showSlider = true;
              showBar = false;
            "
          >
            <span class="iconfont icon-liebiao"></span>
            <p>目录</p>
          </div>
          <div
            class="icon"
            @click="
              showSet = true;
              showBar = false;
            "
          >
            <span class="iconfont icon-gudingdaxiao"></span>
            <p>设置</p>
          </div>
          <div class="icon">
            <span class="iconfont icon-moonyueliang"></span>
            <p>夜间</p>
          </div>
          <div class="icon">
            <span class="iconfont icon-gengduo"></span>
            <p>更多</p>
          </div>
        </div>
      </div>

      <div class="set bottomBar" v-if="showSet">
        <div class="light flex">
          <span>亮度</span>
          <van-slider
            active-color="#e65032"
            v-model="bgLight"
            :max="1"
            :min="0"
            :step="0.1"
            button-size="20px"
            @input="changeLight"
          />
        </div>
        <div class="font_size flex">
          <span> 字体大小 </span>
          <div class="btn" @click="changeFontSize(0)">12px</div>
          <div class="btn" @click="changeFontSize(1)">16px</div>
          <div class="btn" @click="changeFontSize(2)">20px</div>
          <div class="btn" @click="changeFontSize(3)">24px</div>
        </div>
        <div class="bgWrap flex">
          <span>背景颜色</span>
          <div
            class="bg_color"
            v-for="(bg, index) in bgColorArr"
            :key="index"
            :style="{ background: bgColorArr[index] }"
            @click="changeBg(bg)"
          ></div>
        </div>
      </div>

      <div class="catalog_slide" v-show="showSlider">
        <div class="catalogue" id="scrollMain" ref="scrollMain">
          <div class="book_info">
            <div class="left">
              <div class="img">
                <img :src="catalogInfo.coverImage || ''" alt="" />
              </div>
            </div>
            <div class="right">
              <h3>{{ catalogInfo.title }}</h3>
              <p>{{ catalogInfo.author }}</p>
            </div>
          </div>
          <div class="order">
            <span>共{{ catalogInfo.catalog.length }}章</span>
            <div class="order_btn">
              倒序<span class="iconfont icon-xiajiantou"></span>
            </div>
          </div>

          <div class="small_title">正文</div>
          <div class="list" ref="list">
            <ul>
              <li
                v-for="(catalog, index) in catalogInfo.catalog"
                :key="catalog.secId"
                :class="[
                  { active: currentCataIndex == index },
                  { needPay: catalog.needPay == true },
                ]"
                @click="
                  clickCataSlider(catalog.secId, catalogInfo.bookId, index)
                "
              >
                {{ catalog.title }}
                <span
                  class="iconfont icon-lock-full"
                  v-if="catalog.needPay == true && catalog.paid == false"
                ></span>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getBookContent } from "../../api/novel";
export default {
  props: ["catalogInfo"],
  data() {
    return {
      value: 0,
      showSet: false,
      showBar: false,
      showSlider: false,
      bookContent: null,
      // 当前文章文章的页数
      colNum: 1,
      //当前文章的页数
      currentNum: 1,
      // 滑动开始的距离
      startPos: 0,
      // 滑动结束的距离
      endPos: 0,
      // 从缓存中获得所有的缓存目录
      allCatalog: null,
      // 当前书的目录索引
      currentCataIndex: 0,
      //背景亮度
      bgLight: 0,
      //页面背景色
      bgColorArr: ["#ececec", "#eae6dc", "#d7e6dc", "#111111"],
      bgColor: "#fff",
      // h1标签的大小
      hFont: ["24px", "28px", "32px", "36px"],
      // p标签的文字大小
      pFont: ["18px", "22px", "26px", "30px"],
    };
  },
  computed: {},

  created() {
    this.getBookContentFun();
    let currentCatalog = this.catalogInfo;
    let sectionId = currentCatalog.catalogId;
    this.currentCataIndex = currentCatalog.catalog.findIndex(
      (item) => item.secId == sectionId
    );
    this.value =
      (this.currentCataIndex / (this.catalogInfo.catalog.length - 1)) * 100;
  },

  mounted() {
    // this.$nextTick(() => {
    //   setTimeout(() => {
    //     this.init();
    //   }, 3000);
    // });
  },
  methods: {
    //点击是否需要付费
    preventClick(needPay,paid){
      if(needPay==true&&paid===false){
        this.$toast({
          message:'章节需要付费',
          positon:'bottom'
        })
        return
      }
    },
    // 亮度改变
    changeLight(val) {
      console.log(val);
      let bgMask = this.$refs.content.querySelector(".m-mb");
      bgMask.style.background = `rgba(0,0,0,${val})`;
      this.bgLight = val;
    },
    // 改变字体大小
    changeFontSize(size) {
      let hFont = this.$refs.content.querySelector(".m-content>h1");

      let pFont = this.$refs.content.querySelectorAll(".m-content>p");
      pFont.forEach((element) => {
        element.style.fontSize = this.pFont[size];
      });

      hFont.style.fontSize = this.hFont[size];
    },
    // 背景色变化
    changeBg(theme) {
      this.bgColor = theme;
      if (theme == "#111111") {
        let pFont = this.$refs.content.querySelectorAll(".m-content>p");
        let hFont = this.$refs.content.querySelector(".m-content>h1");
        hFont.style.color = "#929292";
        pFont.forEach((element) => {
          element.style.color = "#929292";
        });
      }
    },

    // 滑块结束触发
    dragEnd(val) {
      let index = Math.ceil(
        (val * (this.catalogInfo.catalog.length - 1)) / 100
      );
      console.log(index);
      this.currentCataIndex = index;
      getBookContent({
        source_uuid: this.catalogInfo.bookId,
        content_uuid: this.catalogInfo.catalog[index].secId,
      }).then(({ data: res }) => {
        console.log(res.data.content);
        this.bookContent = res.data.content;
        this.$nextTick(() => {
          this.init();
        });
        this.currentNum = 1;
        this.currentCataIndex = index;
      });
    },
    // 计算屏幕开始位置
    startDistance(event) {
      this.startPos = event.changedTouches[0].pageX;
    },
    endDistance(event) {
      this.endPos = event.changedTouches[0].pageX;
      if (this.startPos - this.endPos < 0) {
        console.log("上一页触发");
        this.dragPrev();
      }
      if (this.startPos - this.endPos > 0) {
        console.log("下一页触发");
        this.dragNext();
      }
    },
    init() {
      let wrapOffsetWidth = this.$refs.wrap.scrollWidth;
      this.colNum = Math.floor(
        parseFloat(wrapOffsetWidth) / parseFloat(document.body.clientWidth)
      );
    },
    dragNext() {
      if (this.currentNum >= this.colNum) {
        this.nextSection();
        // this.init();
      } else {
        let contentRef = this.$refs.content.querySelector(".m-content");
        contentRef.style.transform = `translateX(${
          -375 * this.currentNum
        }px) translateZ(30px)`;
        this.currentNum += 1;
      }

      // this.$toast({
      //   message: "已经到底了",
      //   position: "bottom",
      // });
      // 获取下一章内容
    },
    dragPrev() {
      // 小表为1开始的
      if (this.currentNum == 1) {
        console.log("第一页啦");
        this.prevSection();
      } else {
        let currentIndex = this.currentNum - 2;
        let contentRef = this.$refs.content.querySelector(".m-content");
        contentRef.style.transform = `translateX(${
          -375 * currentIndex
        }px) translateZ(30px)`;
        this.currentNum -= 1;
      }
    },
    // 下一章内容
    nextSection() {
      let index = this.currentCataIndex + 1;
      if (index >= this.catalogInfo.catalog.length - 1) {
        this.$toast({
          message: "已经是最后一页了",
          positon: "bottom",
        });
      }
      this.bookContent = null;
      getBookContent({
        source_uuid: this.catalogInfo.bookId,
        content_uuid: this.catalogInfo.catalog[index].secId,
      }).then(({ data: res }) => {
        console.log(res);
        console.log(res.data.content);
        this.bookContent = res.data.content;
        this.$nextTick(() => {
          this.init();
        });
        this.currentNum = 1;
        this.currentCataIndex += 1;
      });
    },
    // 上一章的内容
    prevSection() {
      let index = this.currentCataIndex - 1;
      if (index < 0) {
        this.$toast({
          message: "已经是首章了",
          positon: "bottom",
        });
        return;
      }
      this.bookContent = null;
      getBookContent({
        source_uuid: this.catalogInfo.bookId,
        content_uuid: this.catalogInfo.catalog[index].secId,
      }).then(({ data: res }) => {
        console.log(res.data.content);
        this.bookContent = res.data.content;
        this.$nextTick(() => {
          this.init();
        });
        this.currentNum = 1;
        this.currentCataIndex -= 1;
      });
    },
    getBookContentFun() {
      let id = this.$route.query.id;
      let sectionId = this.$route.query.sectionId;

      getBookContent({ source_uuid: id, content_uuid: sectionId })
        .then(({ data: res }) => {
          this.bookContent = res.data.content;
          this.$nextTick(() => {
            this.init();
          });
        })
        .catch((err) => {
          if (err)
            this.$toast({
              message: "获取不到章节内容",
              positon: "bottom",
            });
          this.$router.go(-1);
        });
    },

    //点击目录加载内容
    clickCataSlider(content_uuid, source_uuid, index) {
      console.log(source_uuid, content_uuid, index);
      this.bookContent = null;
      getBookContent({
        source_uuid: source_uuid,
        content_uuid: content_uuid,
      })
        .then(({ data: res }) => {
          console.log(res);
          this.bookContent = res.data.content;
          this.$nextTick(() => {
            this.init();
          });
          this.currentNum = 1;
          this.currentCataIndex = index;
          this.showBar = false;
          this.showSlider = false;
        })
        .catch((err) => {
          if (err)
            this.$toast({
              message: "获取不到章节内容",
              positon: "bottom",
            });
          console.log(err);
          // this.$router.go(-1);
        });
    },
    back() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="less" scoped>
.firstLoading {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 500;
}
.novel {
  // width: 100vw;

  height: 100vh;
  // 导航栏
  .top_nav {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 400;
    background-color: #fff;
    padding: 0 13px;
    .nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 35px;
      span {
        color: #706e6b;
        font-size: 15px;
        font-weight: 600;
      }
      .icon {
        display: flex;
        justify-content: flex-end;
        flex: 1;
        .limitTime {
          padding: 0 5px;
          background: #f4f4f4;
          color: #898989;
          font-size: 12px;
          text-align: center;
          border-radius: 20px;
        }
        .iconfont {
          color: #cac9c9;
          flex: 0 0 20px;
          margin-left: 5px;
        }
        .biaoqian {
          color: #c74134;
        }
      }
    }
  }
  //底部栏
  .bottomBar {
    position: fixed;
    bottom: 0;
    left: 0;
    height: 135px;
    width: 100%;
    background: #fff;
    padding: 0 13px;
    .section {
      margin-top: 20px;
      width: 100%;
      text-align: center;
      color: #898989;
      font-size: 13px;
    }

    .progress {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 15px;
      .iconfont {
        font-size: 20px;
      }
    }
    .selectMode {
      display: flex;
      align-items: center;
      //   height: 57px;
      height: 100px;
      width: 100%;
      .icon {
        height: 57px;

        display: flex;
        flex-direction: column;
        width: 25%;
        text-align: center;
        .iconfont {
          font-size: 15px;
        }
        p {
          font-size: 13px;
          color: #898989;
        }
      }
    }
  }
  // 小说内容
  .novel_content {
    height: 100vh;
    // width: 100vw;
    overflow: hidden;
    .content {
      width: 100%;
      /deep/.g-book {
        width: 100%;

        .m-mb {
          perspective: 3000px;

          .m-content {
            transform-style: preserve-3d;
            column-width: 375px;

            column-gap: 0px;
            height: 100vh;
            // transform: translateX(0px);
            transform: translateX(0px) translateZ(0px);
            // transition: all 0.8s linear;
            p {
              padding: 0 17px;
              line-height: 48px;
              font-size: 24px;
            }
            h1 {
              font-size: 30px;
              margin: 127px 0;
              padding: 0 17px;
              font-weight: 600;
            }
          }
        }
      }
    }
  }
  // 小说页面底部设置
  .set {
    z-index: 999;
    .flex {
      display: flex;
      justify-content: space-around;
      align-items: center;
      height: 45px;
    }
    div > span {
      font-size: 12px;
      color: #989898;
    }
    .light {
      /deep/.van-slider {
        width: 80%;
      }
    }
    .font_size {
      .btn {
        // flex: 1;
        width: 50px;
        height: 20px;
        border-radius: 15px;
        text-align: center;

        padding: 10px 5px;
        &.active {
          background: #cac9c9;
        }
        &.needPay {
          background: #cccccc;
        }
      }
    }
    .bgWrap {
      display: flex;
      justify-content: space-between;
      .bg_color {
        // flex: 1;
        width: 50px;
        height: 20px;
        border-radius: 15px;
        padding: 10px 5px;
      }
    }
  }
  .catalog_slide {
    width: 90vw;
    height: 100vh;
    background: #f4f4f4;
    position: fixed;
    top: 0;
    left: 0;
    overflow-y: scroll;
    .book_info {
      width: 100%;
      display: flex;
      align-items: center;
      padding: 20px 13px;
      .left {
        .img {
          width: 47px;
          height: 60px;
          box-shadow: 3px 2px 8px -3px #706e6b;
          img {
            width: 47px;
            height: 60px;
          }
        }
      }
      .right {
        margin-left: 10px;
        .h3 {
          font-size: 15px;
          color: #262626;
        }
        p {
          margin-top: 10px;
          font-size: 12px;
          color: #262626;
        }
      }
    }
    .order {
      margin-top: 10px;
      padding: 0 13px;
      display: flex;
      justify-content: space-between;
      span {
        color: #2b2b2b;
        font-size: 12px;
      }
      div {
        font-size: 12px;
        color: #262626;
        border: 1px solid #adadad;
        border-radius: 15px;
        padding: 0 3px;
        span {
          color: #262626;
        }
      }
    }

    .small_title {
      padding: 0 13px;
      height: 28px;

      color: #cecece;
      font-size: 13px;
      line-height: 28px;
    }
    .list {
      padding: 0 13px;
      p.moreLoading {
        text-align: center;
        color: #adadad;
        height: 30px;
      }
      ul {
        padding: 0 13px;
        li {
          border-bottom: 1px dotted #b3b3b3;
          height: 35px;
          line-height: 35px;
          font-size: 13px;
          color: #000000;
        }
        .active {
          color: #c74134;
        }
      }
    }
  }
  .iconfont {
    color: #b7b7b7;
    font-size: 13px;
  }
}
</style>